<template>
	<div class="container">
		<van-nav-bar fixed title="我的">
			<template #right>
				<van-icon
					@click="$router.push('/user/edit')"
					name="setting-o"
					size="18"
         v-if="hasLogin"
				/>
			</template>
		</van-nav-bar>
		<van-row align="center" type="flex" class="user-bg" v-if="hasLogin">
			<!-- 左侧 -->
			<van-image
				round
				class="user-img"
				src="https://img01.yzcdn.cn/vant/cat.jpeg"
			/>
			<!-- 右侧 -->
			<div class="text">
				<h3>{{username}}</h3>
				<p>我就我是,不一样的烟火！</p>
			</div>
		</van-row>
    <van-row align="center" @click="$router.push('/login')" justify="space-between" type="flex" class="user-bg" v-else>
			<!-- 左侧 -->
      <van-row  type="flex"  align="center" >
        <van-image
          round
          class="user-img"
          src=""
          error-icon="user-o"
        />
        <div class="text">
          <h3>请登录</h3>
          <p>登录之后更加精彩！</p>
        </div>
      </van-row>
      <!-- 右侧 -->
      <van-icon name="arrow" size="30px"  />
		</van-row>


		<van-grid :column-num="30" v-if="hasLogin">
			<van-grid-item icon="like-o" text="收藏1篇" />
			<van-grid-item icon="good-job-o" text="点赞20篇" />
			<van-grid-item icon="newspaper-o" text="发布1篇" />
		</van-grid>
		<van-cell-group>
			<van-cell
				icon="send-gift-o"
				to="/user/article"
				title="我的文章"
				is-link
			/>
			<van-cell icon="diamond-o" to="/user/sc" title="我的收藏" is-link />
			<van-cell
				icon="thumb-circle-o"
				to="/user/zan"
				title="我的点赞"
				is-link
			/>
		</van-cell-group>
		<van-cell-group class="quit-btn" v-if="hasLogin">
			<van-button type="info" block @click="quit">立即退出</van-button>
		</van-cell-group>
	</div>
</template>

<script>
import { getUser } from '@/api/user';
import { removeToken ,getToken} from '@/utils/storage'
export default {
  data() {
    return {
      hasLogin:false,
			username:''
    }
  },
   async created () {
		if(getToken()){
			this.hasLogin = true
			const {data:res} = await getUser()
		console.log(res)
  this.username = res.data.userInfo.username
	console.log(this.username)
		}
  },
  methods: {
    async quit() {
      try {
        await this.$dialog.confirm({
          title:'提示',
          message:'确定退出码？退出资料将会清空'
        })
        removeToken()
         this.hasLogin = false
      } catch (error) {
        console.log(error);
      }
     
    }
  },
}
</script>
<style scoped lang="less">
.user-bg {
	background: #1989fa;
	color: #fff;
	padding: 30px;
	.text {
		margin-left: 30px;
		h3 {
			font-size: 30px;
		}
	}
}
.van-hairline--bottom::after {
	border: none;
}
.user-img {
	width: 150px;
	height: 150px;
	border: 6px solid #fff;
  background-color: #fff;
}
.quit-btn {
	margin: 32px;
}
</style>
